<template>
	<view class="container">
		<view class="user-section">
			<view class="vip-card-box">
				<text>牧耘郎会员卡</text>
				<view class="text">
					<text>开通铂金会员 终身享受</text>
					<text class="red"> {{q_count}} </text>
					<text>大权益</text>
				</view>
			</view>
			<view class="info-box">
				<image class="card-bg" mode="widthFix" src="static/card.png"></image>
				<view class="img">
					<image class="portrait" src='static/touxiangkuang.png'></image>
					<image class="face" src='/static/img/public/myl.png'></image>
					<image class="vip" src='/static/vn.png'></image>
					<view class="text">
						<text>V</text>
						<text>2</text>
					</view>
				</view>
				<view class="text">
					铂金会员卡
				</view>
				<view class="cart_number">NO. &nbsp;&nbsp; 0100 3200 78</view>
			</view>
		</view>
		<view class="list-section">
			<view class="s-header">
				获得3个好友助力，即可免费办理牧耘郎会员卡
			</view>
			<view class="list-item">
				<view v-for="(item,index) in friend" :key="index" class="cate-item">
					<image :src="item.avatar "></image>
					<!-- <image :src="item.avatar?imgsrc + item.avatar:'/static/avatar.png'" ></image> -->
					<!-- <image :src="imgsrc + item.avatar" ></image> -->
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @tap="share">邀请好友助力 {{countDown.hours}}:{{countDown.minutes}}:{{countDown.seconds}} 后名额失效</view>
			<view class="text">分享3个群，成功率高达99%</view>

		</view>
		<view class="rlue">
			<text>活动规则</text>
			<text> 1、分享给好友，获得三个好友的助力，即可免费办理会员卡，但会员赠品将取消。</text>
			<text>2、每个好友只能助力一次。如果在规定时间内，未集满助力，将取消该次办理的名额。</text>
			<text> 3、好友收到助力邀请后，下载并注册登录牧耘郎，方才算助力成功。</text>
		</view>
		<!-- share弹窗 -->
		<view class="share" :class="shareClass" @touchmove.stop.prevent="discard" @tap="hideShare">
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="h1">分享到</view>
				<view class="list">
					<view class="box" @tap="WeChatFriends">
						<image src="/static/temp/wx.png"></image>
						<view class="title">
							微信好友
						</view>
					</view>
					<view class="box" @tap="circleFriends">
						<image src="/static/temp/pyq.png"></image>
						<view class="title">
							朋友圈
						</view>
					</view>
					<!-- <view class="box" @tap="shareOther">
						<image src="../../static/temp/wb.png"></image>
						<view class="title">
							新浪微博
						</view>
					</view>
					<view class="box" @tap="shareOther">
						<image src="../../static/temp/qq.png"></image>
						<view class="title">
							QQ
						</view>
					</view> -->
				</view>
				<view class="btn" @tap="hideShare">
					取消
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import Api from '@/common/api';
	import dateTimeFormat from '@/common/date.js'
	export default {

		data() {
			return {
				imgsrc: Api.imgsrc,
				friend: [],
				count: '',
				q_count: '',
				url: '',
				shareClass: '', //分享弹窗css类，控制开关动画
				countDown: {
					valid_time: 0,
					countDownTime: '',
					timer: null,
					flag: false,
					hours: '00',
					minutes: '00',
					seconds: '00',
				},
				imgIcon: Api.imgIcon,
			};
		},
		onLoad() {
			this.loadData()
		},
		methods: {

			async loadData() {
				var params = {

				};
				let data = await Api.apiCall('post', Api.vip.free, params);
				let friend = data.friend;
				this.count = data.count; //助力好友人数
				this.q_count = data.q_count; //会员九大权限
				this.url = data.url;


				this.countDown.valid_time = (new Date((data.valid_time).replace(/-/g, '/'))).getTime(); //有效时间
				

				let temp = [];
				console.log(this.count)
				for (let i = 0; i < this.count; i++) {
					let help_uid = '';
					let name = '等待助力';
					let avatar = '/static/avatar.png';
					if (friend.length > i) {
						console.log('进来赋值了')
						help_uid = friend[i].help_uid
						name = friend[i].name
						avatar = this.imgIcon + friend[i].avatar
					}
					temp.push({
						"help_uid": help_uid,
						"name": name,
						"avatar": avatar
					})
				}
				this.friend = temp;
				this.getServerTime();

			},
			getServerTime() {
				let deltaTime = 0; //得到deltaTime 之后,随时可以用 客户端时间 + deltaTime，从而得到服务器时间
				deltaTime = this.getServerDate() - (new Date()).getTime();
				let initDuration = (Number(this.countDown.valid_time) - ((new Date()).getTime() + deltaTime)) / 1000;
				this.countDown.flag = false;
				if (this.countDown.timer) {
					this.clearTimer();
				}
				if (initDuration <= 0) {
					this.setFlag(true);
				}
				if (!this.countDown.flag) {

					this.runCountDown(initDuration);
				}
			},

			/**
			 * 清空计时器
			 */
			clearTimer() {
				clearInterval(this.countDown.timer);
				this.countDown.timer = null;
			},

			runCountDown(initDuration) {
				// 第一次给倒计时赋值
				this.countDownFun(initDuration)

				// 每一秒更新一次倒计时
				this.countDown.timer = setInterval(() => {
					if (this.countDown.flag) { // 倒计时结束
						clearInterval(this.countDown.timer)
						return;
					}

					initDuration = initDuration - 1 > 0 ? initDuration - 1 : 0;
					this.countDownFun(initDuration)
				}, 990)
			},

			setFlag(val) {
				this.countDown.flag = val
			},

			/**
			 * 计算倒计时
			 * @param {Number} duration - 秒数时间差
			 * @returns {string} 倒计时的字符串
			 */
			countDownFun(duration) {

				if (duration <= 0) {
					this.setFlag(true) // 将flag属性设为true
					this.countDown.hours = "00"
					this.countDown.minutes = "00"
					this.countDown.seconds = "00"
				} else {
					this.countDown.hours = this.format(Math.floor(duration / 3600))
					this.countDown.minutes = this.format(Math.floor(duration / 60) % 60)
					this.countDown.seconds = this.format(Math.floor(duration % 60))
				}
			},

			format(time) {
				return time >= 10 ? time : `0${time}`
			},



			getServerDate() {
				// let xhr = null;
				// if (window.XMLHttpRequest) {
				// 	xhr = new window.XMLHttpRequest();
				// } else { // ie  
				// 	xhr = new ActiveObject("Microsoft")
				// }
				
				// xhr.open("GET", "/", false) //false不可变  
				// xhr.send(null);
				// let date = xhr.getResponseHeader("Date");
				// let time = new Date(date)
				let time = new Date();
				
				return time.getTime();
			},

			// 分享
			share() {

				this.shareClass = 'show';
			},
			hideShare() {
				this.shareClass = 'hide';
				setTimeout(() => {
					this.shareClass = 'none';
				}, 150);
			},
			WeChatFriends() {
				console.log('**********微信好友分享***********');
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.url,
					title: "牧耘郎",
					summary: "我是Jack,帮我助力一下，我发现了一个优质的农品购物平台，物美价廉。",
					imageUrl: "http://47.104.217.202/static/icon/icon.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			circleFriends() {
				console.log('**********朋友圈分享***********');
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "牧耘郎",
					summary: "我是Jack,帮我助力一下，我发现了一个优质的农品购物平台，物美价廉。",
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareOther() {
				uni.showToast({
					title: '暂未开启分享',
					duration: 2000
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	.yticon {
		font-size: 28upx;
		color: #232323;
	}

	.user-section {
		width: 100%;
		height: 520upx;
		padding: 47upx 4% 106upx;
		// background-color: #232323;
		background: linear-gradient(to right, rgba(255, 237, 197, 1.0), rgba(255, 233, 170, 1.0));
		border-bottom-left-radius: 120upx 60upx;
		border-bottom-right-radius: 120upx 60upx;

		.vip-card-box {
			width: 100%;
			height: 140upx;
			color: #232323;
			display: flex;
			flex-direction: column;
			font-size: $font-sm + 32upx;
			font-weight: 600;
			border-radius: 20upx;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 36upx;
				font-weight: 600;
			}

			.red {
				color: #E52631;
				padding: 0 8upx;
				font-size: 56upx;
			}
		}

		.info-box {
			width: 100%;
			height: 354upx;
			padding: 0 10upx;
			margin-top: 54upx;
			position: relative;
			color: #F9E2A2;
			font-size: $font-sm + 8upx;

			.card-bg {
				width: 670upx;
				height: 350upx;
				box-shadow: 0 3upx 20upx rgba(0, 0, 0, .3);
				border-radius: 30upx;
				overflow: hidden;
			}

			.img {
				width: 112upx;
				height: 140upx;
				position: absolute;
				left: 60upx;
				top: 40upx;

				.portrait {
					left: 0;
					top: 0;
					width: 112upx;
					height: 112upx;
					border-radius: 50%;
					background-color: #FFF2BC;
				}

				.face {
					width: 80upx;
					height: 80upx;
					top: -102upx;
					left: 18upx;
				}

				.vip {
					width: 51upx;
					height: 40upx;
					top: -110upx;
					left: 32upx;
				}

				.text {
					top: 96upx;
					left: 42upx;
					color: #232323;
					font-size: 22upx;

					text {
						&:first-child {
							font-size: 28upx;
						}
					}
				}

				span {
					font-size: 8upx;
				}
			}

			.text {
				position: absolute;
				top: 72upx;
				left: 200upx;

			}

			.cart_number {
				position: absolute;
				top: 280upx;
				left: 190upx;
			}
		}
	}

	.list-section {
		width: 100%;
		height: 308upx;
		margin-top: 116upx;

		.s-header {
			width: 100%;
			padding: 38upx 40upx 10upx;
			color: #232323;
			font-size: 32upx;
			// border: 1upx solid red;
		}

		.list-item {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			padding: 30upx 60upx 46upx;

			.cate-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: $font-sm + 4upx;
				color: #757777;
			}

			/* 原图标颜色太深,不想改图了,所以加了透明度 */
			image {
				width: 88upx;
				height: 88upx;
				margin-bottom: 12upx;
				border-radius: 50%;
				// opacity: .7;
				opacity: 1;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 20upx 80upx 56upx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.btn {
			width: 560upx;
			height: 88upx;
			margin: 0 14upx;
			// margin-left:65upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44upx;
			background-color: #FFBC21;
			color: #232323;
			font-size: 28upx;
		}

		.text {
			width: 100%;
			padding: 40upx 0 32upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #757777;
			font-size: 28upx;
		}



	}

	.rlue {
		width: 100%;
		display: flex;
		font-size: 28upx;
		flex-flow: column wrap;
		align-items: center;
		color: #ACADAE;
		box-sizing: border-box;
		padding: 0 29upx 60upx;

		text {
			width: 100%;
			text-indent: 1em;
			text-align: left;
			margin-top: 20upx;

			&:first-child {
				text-indent: unset;
				text-align: center;
				margin-bottom: 30upx;
				margin-top: unset;
			}
		}
	}

	.share {
		display: none;
		z-index: 1000;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.15s linear both;
			}

			.layer {
				animation: showLayer 0.15s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.15s linear both;
			}

			.layer {
				animation: hideLayer 0.15s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			background-color: rgba(0, 0, 0, .5);
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 11;
		}

		.layer {
			width: 100%;
			position: fixed;
			z-index: 12;
			padding: 0 4%;
			top: 100%;
			backdrop-filter: saturate(150%) blur(25upx);
			background-color: rgba(255, 255, 255, .7);
			border-radius: 20upx 20upx 0 0;

			.list {
				width: 100%;
				display: flex;
				justify-content: space-around;
				padding: 10upx 0 30upx 0;

				.box {
					width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					image {
						width: 13.8vw;
						height: 13.8vw;
					}

					.title {
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}

			.btn {
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}

			.h1 {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}
</style>
